<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider Test Page</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../ui.core.js"></script>

<script type="text/javascript" src="../ui.slider.js"></script>

<link rel="stylesheet" href="../themes/flora/flora.slider.css" />
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 20px;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}
label {
	width: 100px;
	display: block;
	float: left;	
}

input {
	border: 1px solid #999;
	padding: 2px;	
}


.zoom { position: relative }

.handle{
	position: absolute; 
    height: 5px;
    width: 21px;
    margin-left: -3px;
    background-color: #6EA8FE;
    border: solid 1px #000;
    cursor: pointer;
    font-size: 1px;
}

.slider{
    background: url(images/zoom_bar.png);
    height: 137px;
    width: 18px;
}


</style>
</head>
<body class="flora">

<div id="hidden" style='display:none;background: #eee;'>

<input class="range" step="10" max="200" min="-200" name="n" value="0"> I'm a range input!
</div>

<br /> <br />
<hr />

<div style="margin: 10px;"><label for="slider1_value">current value:</label> <input type="text" value='0' id='slider1_value' /></div>

<div id='slider1' class="ui-slider-2">
	<div class='ui-slider-handle'></div>
	<div class='ui-slider-handle' style="left:100px"></div>	
</div>

<div id='slider3'>
	<div class='ui-slider-handle'></div>	
</div>

<div id='slider2' style="position: absolute; top: 0px; right: 0px; margin: 20px; height: 400px; width: 20px; background: #ccc;">
	<div class='ui-slider-handle' style='height: 20px; background: #888;'></div>	
</div>

<div class="zoom">
    <img src="images/zoom_plus.png" height="16" width="18" class="theme_backgroundColor" /><br/>
    <div class="slider"><div class="handle"></div></div><br/>
    <img src="images/zoom_minus.png" height="15" width="18" class="theme_backgroundColor" style="position: absolute; top: 160px;" />
</div>
	
<script type="text/javascript">
if(!window.console) {
 window.console = {
 	log: function() {
 		//alert(arguments[0]);	
 	}	
 }	
}

$.fn.rangeSlider = function() {
	return this.each(function() {
		$this = $(this);
		var slider = $("<div><div class='ui-slider-handle'></div></div>").insertAfter(this).slider({
			min: $this.attr("min"),
			max: $this.attr("max"),
			stepping: $this.attr("step"),
			startValue: $this.attr("value"),
			slide: function(e, ui) {
				$this.attr("value", Math.round(ui.value))
			}
		});
		$this.change(function() {
			slider.slider("moveTo", this.value)
		})
	});
}

$(document).ready(function(){
	
	$('#slider3').slider();
	
	$('#slider1').slider({
		stepping: 10,
		max: 100,
		min: -100, 
		range: true,
		change: function() {
			console.log('changed!');	
		},
		slide: function(e,ui) {
			$('#slider1_value')[0].value = ui.value;
		},
		handles: [
			{start: -60, min: -100, max: 0},
			{start: 10, min: -20, max: 100}
		]
	});
	
	$('#slider2').slider();
	
	$(".range").rangeSlider();
	$("#hidden").show();
	
	
	 $(".slider").slider({
        handle: '.handle',
        steps: 10,
        startValue: 70
    });
    $(".zoom img:first").click(function(){
        $(".slider").slider("moveTo", "-=10" );
    });
    $(".zoom img:last").click(function(){
        $(".slider").slider("moveTo", "+=10");
    });

});
</script>
</body>
</html>
